<script setup lang="ts"></script>


<template>
    <!-- 封装公共布局组件 -->
    <div class="container">
        <!-- 左侧内容 -->
        <div class="left">
            <slot name="left"></slot>
        </div>
        <!-- 中间内容 -->
        <div class="centent">
            <slot name="centent"></slot>
        </div>
        <!-- 右侧内容 -->
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>


</template>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;

    .left {
        width: 32vw;
        height: 100vh;
        background: url(../assets/layout/Left.png) no-repeat 0 0 / 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 70px 70px 80px 55px;
        box-sizing: border-box;
    }

    .centent {
        width: 36vw;
        height: 100vh;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        padding: 80px 10px;
        box-sizing: border-box;
    }

    .right {
        width: 32vw;
        height: 100vh;
        background: url(../assets/layout/Right.png) no-repeat 0 0 / 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
        padding: 70px 55px 80px 70px;
        box-sizing: border-box;

    }
}
</style>